<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS 选择器</title>
<style>
	/*元素选择器*/
	h1{
		color: aqua;
	}

	/*类选择器*/
	.highlight{
		background-color: yellow;
	}

	/*id选择器*/
	#header{
		font-size: 35px;
	}

	/*通用选择器*/
	* {
		font-family: "KaiTi";
		font-weight: bolder;
	}

	/*子类选择器*/
	.father > .son{
		color: yellowgreen;
	}

	/*后代选择器*/
	.father p{
		color: brown;
	}

	/*相邻兄弟选择器*/
	h3 + p{
		background-color: chocolate;
	}

	/*伪类选择器*/
	#element:hover{
		color: blueviolet;
	}
</style>
</head>
<body>
	<h1>这是一个元素选择器示例</h1>
	<h2 class="highlight">这是一个类选择器示例</h2>
	<h3 id="header">这是一个id选择器示例</h3>

	<div class="father">
		<p class="son">这是一个子元素选择器示例</p>
		<div>
			<p class="grandson">这是一个后代选择器示例</p>
		</div>
	</div>

	<p>这是一个普通的p标签</p>
	<h3>这是一个相邻兄弟选择器示例</h3>
	<p>这是一个普通的p标签</p>

	<p id="element">这是一个伪类选择器示例</p>


</body>
</html>